<template>
	<view class="container">
		<view class="userinfo">
			<view class="item">
				<view class="item-left">
					<text>头像</text>
				</view>
				<view class="item-right" @click="uploadAvatar">
					<image class="avatar" :src="userInfo2.avatar_url"></image>
					<image class="righticon" src="/static/icon/right.png"></image>
				</view>
			</view>
			<view class="item">
				<view class="item-left">
					<text>姓名</text>
				</view>
				<view class="item-right">
          <input type="text" v-model="userInfo2.nickname" style="text-align: right;">
				</view>
			</view>
			<view class="item">
				<view class="item-left">
					<text>手机号</text>
				</view>
				<view class="item-right">
          <input type="text" v-model="userInfo2.phone" disabled style="text-align: right">
				</view>
			</view>
		</view>

    <view class="btn">
      <button @click="save">保存</button>
    </view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
        userInfo2: {}
			}
		},
    computed: {
      ...mapGetters(['userInfo'])
    },
    onLoad() {
      this.userInfo2 = {...this.userInfo}
      console.log(this.userInfo2)
    },
    methods: {
      uploadAvatar() {
        let that = this
        // 选择单个文件上传图片
        uni.chooseImage({
          count: 1, //默认9
          sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
          sourceType: ['album'], //从相册选择
          success: function(res) {
            uni.uploadFile({
              url: that.$api.uploadImage, //仅为示例,非真实的接口地址
              filePath: res.tempFilePaths[0],
              name: 'file',
              success: (uploadFileRes) => {
                let data = JSON.parse(uploadFileRes.data)
                console.log(data, that.userInfo2);
                that.userInfo2.avatar_url = data.data.url
                that.$store.dispatch('setUserInfo', {...that.userInfo2, avatar_url: data.data.url})
              }
            })
          }
        });
      },
      save() {
        this.$store.dispatch('setUserInfo', this.userInfo2)
        this.$utils.toastTip('保存成功')
      }
    },
	}
</script>

<style>
	page {
		background: #F8F9FA;
	}
</style>

<style lang="scss" scoped>
	.userinfo {
		border-radius: 20rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
		margin: 20rpx 30rpx 30rpx 30rpx;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #ECECEC;
			padding: 0rpx 30rpx;

			.item-left {
				padding: 30rpx 0rpx;
				text {
					font-size: 30rpx;
					color: #333333;
				}
			}

			.item-right {
				display: flex;
				align-items: center;

				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}

				.righticon {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}
  .btn {
    margin-top: 70rpx;
    width: 100%;
    padding: 0 30rpx;
    button {
      flex: 1;
      border-radius: 46rpx;
      background: #f7c300;
      color: #FFFFFF;
      font-size: 30rpx;
      padding: 12rpx 0rpx;
    }
  }

</style>
